<template>
	<div class="v-avatar" @keyup.esc="handleCancel">
		<el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="beforeAvatarUpload">
			<el-button size="small" type="primary">选择图片</el-button>
			<div slot="tip" class="el-upload__tip">支持{{imgType}}格式，且图片小于 {{imgSize}}M</div>
		</el-upload>
		<div class="avatar" v-if="imageUrl">
			<vue-cropper ref="cropper" :img="imageUrl" :outputSize="1" :outputType="outputType" :autoCrop="isCropBorder">
			</vue-cropper>
			<el-button-group style="margin-top:10px;">
				<el-tooltip class="item" effect="dark" content="向右旋转90度" placement="top">
					<el-button type="primary" icon="el-icon-refresh-right" @click="handleRotateRight"></el-button>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="向左旋转90度" placement="top">
					<el-button type="primary" icon="el-icon-refresh-left" @click="handleRotateLeft"></el-button>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="显示裁剪框" placement="top">
					<el-button type="primary" icon="el-icon-full-screen" @click="isCropBorder = true"></el-button>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="裁剪" placement="top">
					<el-button type="primary" icon="el-icon-crop" @click="handleCrop"></el-button>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="取消框选" placement="top">
					<el-button type="primary" icon="el-icon-refresh" @click="handleCancel"></el-button>
				</el-tooltip>
			</el-button-group>
		</div>
		<el-image v-else class="img-area avatar-default">
			<div slot="error" class="image-slot">
				<i class="el-icon-picture-outline"></i>
			</div>
		</el-image>
	</div>
</template>

<script>
	import {
		VueCropper
	} from 'vue-cropper'
	export default {
		name: 'v-avatar',
		inheritAttrs: false,
		props: {
			imgType: {
				type: String,
				default: 'jpg,png'
			},
			imgSize: {
				type: Number,
				default: 2
			},
			action: {
				type: String,
				default: ''
			},
			outputType: {
				type: String,
				default: 'png'
			},
		},
		data() {
			return {
				imageUrl: '',
				isCropBorder: true,
				mimeType: {
					bmp: 'image/bmp',
					gif: 'image/gif',
					jpeg: 'image/jpeg',
					jpg: 'image/jpeg',
					png: 'image/png',
					svg: 'image/svg+xml',
					tif: 'image/tiff',
					tiff: 'image/tiff',
					webp: 'image/webp'
				}
			};
		},
		computed: {
			type() {
				return this.imgType.split(',').map(v => this.mimeType[v])
			}
		},
		methods: {
			beforeAvatarUpload(file) {
				const isAllowImg = this.type.includes(file.type);
				const isLtXM = file.size / 1024 / 1024 < this.imgSize;

				if (!isAllowImg) {
					this.$message.error(`上传头像图片只能是 ${this.imgType} 格式!`);
				}
				if (!isLtXM) {
					this.$message.error(`上传头像图片大小不能超过 ${this.imgSize}MB!`);
				}
				this.imageUrl = URL.createObjectURL(file);
				//不上传
				return false;
			},
			handleCrop() {
				this.$refs.cropper.getCropData(data => {
					this.imageUrl = data
					this.$emit('avatar', data)
					this.isCropBorder = false
				})
			},
			handleRotateRight() {
				this.$refs.cropper.rotateRight()
			},
			handleRotateLeft() {
				this.$refs.cropper.rotateLeft()
			},
			handleCancel() {
				this.$refs.cropper.clearCrop()
				this.isCropBorder = false
			},
		},
		components: {
			VueCropper
		},
	};
</script>
<style lang="scss" scoped>
	@import '~_c/vAvatar/style';
</style>
